<template>
  <div class="home">
    <my-header>
      <span class="left"></span>
      <span class="title">用户登录</span>
      <span class="right" @click="changeBackColor">切换主题</span>
    </my-header>
    <div class="box">
      <div class="form-item">
        <label>手机号码</label>：
        <my-input type="text" placeholder="请输入手机号码" v-model="form.mobile"></my-input>
        <span :class="['iconfont', telClass]"></span>
      </div>
      <div class="form-item">
        <label>密码</label>：
        <my-input type="password" placeholder="请输入密码" v-model="form.pwd"></my-input>
        <span :class="['iconfont', pwdClass]"></span>
      </div>
      <button :disabled="disabled" v-back="$store.state.backColor" @click="goShop">登录</button>
    </div>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader/myHeader'
import myInput from '@/components/myInput/myInput'
import {mapMutations} from 'vuex'
import axios from 'axios'
// 手机号正则表达式
let regTel = /^1[3|5|6|7|8|9]\d{9}$/
let pwd = /^[a-zA-Z]\w{5}$/
export default {
  name: 'Home',
  components: {
    myHeader,
    myInput
  },
  data() {
    return {
      form: {
        mobile: '',
        pwd: ''
      },
      disabled: true,
      telClass: '',
      pwdClass: ''
    }
  },
  created() {
  },
  methods: {
    ...mapMutations(['changeBackColor']),
    goShop() {
      this.$router.push('/about')
    }
  },

  watch: {
    form: {
      deep: true,
      handler(val) {
        // console.log(val);
        if(regTel.test(val.mobile) && pwd.test(val.pwd)) {
          this.disabled = false
        } else {
          this.disabled = true
        }
        if(val.mobile === '') {
          this.telClass = ''
        } else if(regTel.test(val.mobile)) {
          this.telClass = 'icon017check03'
        } else {
          this.telClass = 'iconcuowu-'
        }
        if(val.pwd === '') {
          this.pwdClass = ''
        } else if(pwd.test(val.pwd)) {
          this.pwdClass = 'icon017check03'
        } else {
          this.pwdClass = 'iconcuowu-'
        }
      } 
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    width: 100%;
    height: 100%;
  }
  
  .box {
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    flex-direction: column;
    .form-item {
      display: flex;
      width: 100%;
      margin-bottom: 20px;
      align-items: center;
      label {
        font-size: 14px;
        width: 100px;
        text-align: justify;
        text-align-last: justify;
      }
      .iconfont {
        margin-left: 5px;
        font-size: 14px;
        width: 20px;
      }
      .icon017check03 {
        color: green;
      }

      .iconcuowu- {
        color: red;
      }
    }
    button {
      padding: 10px 50px;
      border: none;
      outline: none;
      color: #fff;
      border-radius: 6px;
      font-weight: bold;
    }

    button[disabled] {
      background-color: #ccc !important;
    }
  }
</style>
